<style>
  .el-tabs__item {
    font-size: 18px;
    font-weight: 700;
    color: #000;
  }
</style>
<template>
  <div class="create-container">
    <div class="right-container">
      <!---->
      <el-row :gutter="24">
        <el-col :span="4">
          <div class="col-pspan">
            <p class="p1">账户注册</p>
            <p class="p2">
              {{ this.userSum }}
              <span>次</span>
            </p>
            <p class="p3">总计账户注册</p>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="col-pspan">
            <p class="p1">公司注册</p>
            <p class="p2">
              {{ this.companySum }}
              <span>次</span>
            </p>
            <p class="p3">总计公司注册</p>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="col-pspan">
            <p class="p1">签约银行注册</p>
            <p class="p2">
              {{ this.companygetNum }}
              <span>次</span>
            </p>
            <p class="p3">签约银行总注册</p>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="col-pspan">
            <p class="p1">返佣</p>
            <p class="p2">
              {{ this.commissionNum }}
              <span>元</span>
            </p>
            <p class="p3">总计返佣</p>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="col-pspan">
            <p class="p1">推广统计</p>
            <p class="p2">
              {{ this.extensionsum }}
              <span>次</span>
            </p>
            <p class="p3">总计推广</p>
          </div>
        </el-col>
      </el-row>
    </div>

    <!--一楼统计图-->
    <div class="ech-s">
      <div class="d1">
        <div class="d3">
          <el-form ref="editForm" :model="editForm" status-icon label-position="right"
                   label-width="100px" style="display: flex">
            <el-form-item label="开始日期：" prop="startTime">
              <el-date-picker
                style="width:100%"
                v-model="editForm.startTime"
                type="date"
                placeholder="开始日期"
                value-format="yyyy/MM/dd">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="结束日期：" prop="endTime">
              <el-date-picker
                style="width: 100%"
                v-model="editForm.endTime"
                type="date"
                placeholder="结束日期"
                value-format="yyyy/MM/dd">
              </el-date-picker>
            </el-form-item>
            <div style="margin: 0 15px">
              <el-button type="primary" icon="el-icon-search" @click="queryList">查询</el-button>
            </div>
          </el-form>
          <div ref="chart" class="echart"></div>
        </div>
      </div>

      <div class="d1 d2">
       <!-- <div class="d3">-->
        <el-tabs type="border-card" style="width: 100%;height: 100%">
          <el-tab-pane label="每个签约银行所注册的公司">
            <!--<div ref="charts" class="charts"></div>-->
            <el-table :data="companyList" ref="cargoTable" element-loading-text="正在查询中。。。" border fit highlight-current-row
                      :header-cell-style="{background:'#F2F2F2',color:'#666'}">
              <el-table-column align="left" min-width="100" label="签约银行" prop="bankCode">
                <template slot-scope="scope">
                  {{ { "0000":"富民银行", "0001":"网商银行", "0002":"振兴银行" }[ scope.row.bankCode] }}
                </template>
              </el-table-column>
              <el-table-column align="left" min-width="120" label="总注册公司次数" prop="count"/>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="每个签约银行的总返佣">
            <!--<div ref="harts" class="charts"></div>-->
            <el-table :data="commissionList" ref="cargoTable" element-loading-text="正在查询中。。。" border fit highlight-current-row
                      :header-cell-style="{background:'#F2F2F2',color:'#666'}">
              <el-table-column align="left" min-width="100" label="签约银行" prop="bankCode">
                <template slot-scope="scope">
                  {{ { "0000":"富民银行", "0001":"网商银行", "0002":"振兴银行" }[ scope.row.bankCode] }}
                </template>
              </el-table-column>
              <el-table-column align="left" min-width="120" label="总返佣（元）" prop="count"/>
            </el-table>
          </el-tab-pane>
        </el-tabs>
        <!--</div>-->
      </div>
    </div>

    <!--二楼统计图-->
    <accoun-time></accoun-time>

    <!--三楼统计图-->
    <div class="d1 d2" style="padding: 30px 10px 20px;margin: 30px 0 30px;background-color: #fff">
      <div ref="charts" class="charts"></div>
    </div>
    <div class="d1 d2" style="padding: 30px 10px 20px;background-color: #fff">
      <div ref="chart2" class="charts"></div>
    </div>

  </div>
</template>

<script>
import {doGet, doPost} from '@/api'
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
import AccounTime from './accountime'

export default {
  name: 'usersearch',
  components: {
    Pagination,
    AccounTime,
  },
  data() {
    return {
      list: [],
      list1: [],
      companyList: [],
      commissionList: [],
      userSum: undefined,
      companySum: undefined,
      editForm: {
        startTime: undefined,
        endTime: undefined
      },
      companygetNum: undefined,
      commissionNum: undefined,
      extensionsum: undefined
    }
  },
  created() {
    this.$nextTick(() => {
      this.queryList()
      this.handleEdit()
      this.extensionList()
      this.extMoneyList()
    });
  },
  methods: {
    queryList() {
      const myChart = this.$echarts.init(this.$refs.chart);
      doGet('accountStatistics.html?op=time', this.editForm).then(response => {
        let userList= []
        let companyList = []
        let usersum = 0
        let treeData = []
        for (var item of response.data.userList) {
          userList.push(item.count)
          usersum += item.count
          treeData.push(item.year + '年' + item.month + '月')
        }
        this.userSum = usersum
        let companysum = 0
        for (var items of response.data.companyList) {
          companyList.push(items.count)
          companysum += items.count
          if (treeData.indexOf(items.year + '年' + items.month + '月') == -1) {
            treeData.push(items.year + '年' + items.month + '月')
          }
        }
        this.companySum = companysum
        myChart.setOption({
          title: {
            text: '账户和公司总注册',
            hideDelay: '300'
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: ['注册账户', '注册公司']
          },
          toolbox: {
            show: true,
          },
          calculable: true,
          xAxis: [
            {
              type: 'category',
              data: treeData,
              axisLabel: {
                rotate: 45,
              }
            }
          ],
          yAxis: [
            {
              type: 'value',
              axisLabel: {
                formatter: '{value} 人'
              }
            }
          ],
          dataZoom: [{
            type: 'inside',
            start: 0,
            end: 100
          }, {
            start: 0,
            end: 12,
            handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
            handleSize: '80%',
            handleStyle: {
              color: '#fff',
              shadowBlur: 3,
              shadowColor: 'rgba(0, 0, 0, 0.6)',
              shadowOffsetX: 2,
              shadowOffsetY: 2
            }
          }],
          series: [
            {
              name: '注册账户',
              type: 'bar',
              data: userList,
              markPoint: {
                data: [
                  {type: 'max', name: '最大值'},
                  {type: 'min', name: '最小值'}
                ]
              },
            },
            {
              name: '注册公司',
              type: 'bar',
              data: companyList,
              markPoint: {
                data: [
                  {type: 'max', name: '最大值'},
                  {type: 'min', name: '最小值'}
                ]
              },
            }
          ]
        });
      }).catch(response => {
        this.list = []
        this.$notify.error({
          title: '失败',
          message: response.message
        })
      })
    },
    handleEdit() {
      doGet('accountStatistics.html?op=bank', {}).then(response => {
        this.companyList = response.data.companyList
        this.commissionList = response.data.commissionList
        let companygetNum = 0
        let commissionNum = 0
        for (var item of response.data.companyList) {
          companygetNum += item.count
        }
        for (var items of response.data.commissionList) {
          commissionNum += items.count
        }
        this.companygetNum = companygetNum
        this.commissionNum = commissionNum
      }).catch(response => {
        this.companyList = []
        this.commissionList = []
        this.$notify.error({
          title: '失败',
          message: response.message
        })
      })
    },
    extensionList() {
      const myChart = this.$echarts.init(this.$refs.charts)
      doGet('accountStatistics.html?op=extension').then(response => {
        let data = response.data.extensionList
        let extensionlever0List = []
        let extensionlever1List = []
        let extensionlever2List = []
        let treeData = []
        let extensionsum1 = 0
        let extensionsum2 = 0
        let extensionsum3 = 0
        if (data['0']) {
          for (var item of data['0']) {
            extensionlever0List.push(item.count)
            treeData.push(item.year + '年' + item.month + '月')
            extensionsum1 += item.count
          }
        }
        if (data['1']) {
          for (var item of data['1']) {
            extensionlever1List.push(item.count)
            extensionsum2 += item.count
            if (treeData.indexOf(item.year + '年' + item.month + '月') == -1) {
              treeData.push(item.year + '年' + item.month + '月')
            }
          }
        }
        if (data['2']) {
          for (var item of data['2']) {
            extensionlever2List.push(item.count)
            extensionsum3 += item.count
            if (treeData.indexOf(item.year + '年' + item.month + '月') == -1) {
              treeData.push(item.year + '年' + item.month + '月')
            }
          }
        }
        this.extensionsum = extensionsum1 + extensionsum2 + extensionsum2
        this.treeData = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
        myChart.setOption({
          title: {
            text: '每个月推广总数',
            hideDelay: '300'
          },
          color: ['#003366', '#006699', '#4cabce'],
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          legend: {
            data: ['直接贴现', '一级推广', '二级推广']
          },
          xAxis: [
            {
              type: 'category',
              axisTick: { show: false },
              data: treeData,
              axisLabel: {
                rotate: 45,
              }
            }
          ],
          yAxis: [
            {
              type: 'value',
              axisLabel: {
                formatter: '{value} 人'
              }
            }
          ],
          series: [
            {
              name: '直接贴现',
              type: 'bar',
              barGap: 0,
              data: extensionlever0List
            },
            {
              name: '一级推广',
              type: 'bar',
              data: extensionlever1List
            },
            {
              name: '二级推广',
              type: 'bar',
              data: extensionlever2List
            }
          ]
        });
      }).catch(response => {
        this.list = []
        this.$notify.error({
          title: '失败',
          message: response.message
        })
      })
    },
    extMoneyList() {
      const myChart = this.$echarts.init(this.$refs.chart2)
      doGet('accountStatistics.html?op=extension').then(response => {
        let data = response.data.extensionList
        let extensionextend0List = []
        let extensionextend1List = []
        let extensionextend2List = []
        let treeData = []
        if (data['0']) {
          for (var item of data['0']) {
            extensionextend0List.push(item.extendMoney)
            treeData.push(item.year + '年' + item.month + '月')
          }
        }
        if (data['1']) {
          for (var item of data['1']) {
            extensionextend1List.push(item.extendMoney)
            if (treeData.indexOf(item.year + '年' + item.month + '月') == -1) {
              treeData.push(item.year + '年' + item.month + '月')
            }
          }
        }
        if (data['2']) {
          for (var item of data['2']) {
            extensionextend2List.push(item.extendMoney)
            if (treeData.indexOf(item.year + '年' + item.month + '月') == -1) {
              treeData.push(item.year + '年' + item.month + '月')
            }
          }
        }
        this.treeData = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
        myChart.setOption({
          title: {
            text: '每个月推广佣金',
            hideDelay: '300'
          },
          color: ['#006699', '#4cabce', '#e5323e'],
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          legend: {
            data: ['直接贴现佣金', '一级推广佣金', '二级推广佣金']
          },
          xAxis: [
            {
              type: 'category',
              axisTick: { show: false },
              data: treeData,
              axisLabel: {
                rotate: 45,
              }
            }
          ],
          yAxis: [
            {
              type: 'value',
              axisLabel: {
                formatter: '{value} 元'
              }
            }
          ],
          series: [
            {
              name: '直接贴现佣金',
              type: 'bar',
              barGap: 0,
              data: extensionextend0List
            },
            {
              name: '一级推广佣金',
              type: 'bar',
              data: extensionextend1List
            },
            {
              name: '二级推广佣金',
              type: 'bar',
              data: extensionextend2List
            }
          ]
        });
      }).catch(response => {
        this.list = []
        this.$notify.error({
          title: '失败',
          message: response.message
        })
      })
    },
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .col-pspan {
    background-color: #F8F8F8;
    height: 130px;
    .p1 {
      padding: 14px;
      margin: 0;
      font-size: 14px;
      color: #666;
      border-bottom: 1px solid #fff;
    }
    .p2 {
      font-size: 38px;
      color: #009688;
      padding: 5px 25px 10px;
      margin: 0;
      span {
        font-size: 14px;
        color: #666
      }
    }
    .p3 {
      margin: 0;
      text-align: right;
      color: #666;
      font-size: 14px;
      padding-right: 10px;
    }
  }
  .ech-s {
    display: flex;
    padding-top: 15px;
    .d1 {
      flex: 1;
      background-color: #fff;
      height: 500px;
    }
    .d2{
      margin-left: 15px;
    }
    .d3 {
      padding-top: 10px;
    }
  }
  .echart {
    width: 100%;
    height: 430px;
  }
  .charts {
    height: 430px;
  }
</style>
